{extend name="../../../view/public/base" /}

{block name="css"}
<link rel="stylesheet" href="/layui/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
<style>
    .bw-container {
        min-height: 10px;
    }

    .layui-elem-quote {
        margin-bottom: 10px;
        padding: 15px;
        line-height: 22px;
        border-left: 5px solid rgb(110, 86, 255);
        border-radius: 0 2px 2px 0;
        background-color: #f8f8f8;
    }

    .red-font {
        color: red;
    }

    .member_tips {
        display: none;
    }
</style>
{/block}

{block name="body"}


<div class="bw-container">
    <div class="bw-main">
        <blockquote class="layui-elem-quote">
            <div class="admin_tips">
                节点说明：<br>
                总后台节点类型分为：<br>
                ①.平台系统节点 - <span class="red-font">system</span> :给总后台新加菜单或权限节点（非插件菜单）时选择该类型<br>
                ②.平台插件节点 - <span class="red-font">system_plugin</span> :开发总后台的插件菜单或权限节点时选择该类型<br>
                （注意：插件节点请务必创建在 <span class="red-font">总后台的插件中心</span>下）
            </div>
            <div class="member_tips">
                节点说明：<br>
                租户后台节点类型分为：<br>
                ①.租户系统节点 - <span class="red-font">system</span> :给租户后台新加菜单或权限节点（非插件和应用）时选择该类型<br>
                ②.租户插件节点 - <span class="red-font">system_plugin</span> :开发租户后台的插件菜单或权限节点时选择该类型<br>
                （注意：插件节点请务必创建在 <span class="red-font">租户的插件中心</span>下）
                <br>
                ③.租户应用节点 - <span class="red-font">app</span> :开发租户后台的应用菜单或权限节点时选择该类型<br>
                （注意：应用节点的顶级节点请务必创建在 <span class="red-font">根节点</span>上）
                <br>
                ④.租户应用插件节点 - <span class="red-font">app_plugin_xxx (xxx=应用对应标识)</span> :开发租户后台的应用插件菜单或权限节点时选择该类型<br>
                （注意：应用插件节点请务必也创建在 <span class="red-font">租户的插件中心</span>下）
            </div>

        </blockquote>
    </div>
</div>

<div class="bw-container">
    <div class="bw-main">
        <div class="layui-tab layui-tab-brief" lay-filter="node_tab">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="1">总平台</li>
                <li lay-id="2">租户</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                        </div>
                        <div class="layui-card">
                            <div>
                                <div class="layui-btn-group">
                                    <button class="layui-btn" id="btn-expand">全部展开</button>
                                    <button class="layui-btn" id="btn-fold">全部折叠</button>
                                </div>
                                <table class="layui-table" id="list" lay-filter="listFilter"></table>

                                <!--工具栏-->
                                <script type="text/html" id="listToolbar">
                                    <!--<a class="layui-btn layui-btn-sm layui-bg-black" lay-event="refresh" title="刷新"><i class="layui-icon layui-icon-refresh" style="font-size: 8px !important;"></i> </a>-->
                                    <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add" title="添加">添加权限节点</a>
                                    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del" title="删除">删除权限节点</a>
                                </script>

                                <!--父id-->
                                <script type="text/html" id="pid">
                                    {{ d.pid }}
                                </script>
                                <!--分类名称-->
                                <script type="text/html" id="cate_name">
                                    {{ d.cate_name }}
                                </script>
                                <!--排序-->
                                <script type="text/html" id="sort">
                                    {{ d.sort }}
                                </script>
                                <!--图标-->
                                <script type="text/html" id="pic">
                                    {{#  if(d.icon != null&&d.icon != ''){ }}
                                    <i class="{{d.icon}}"></i>
                                    {{#  } else { }}
                                    <span style="color: #c2c2c2">无</span>
                                    {{#  } }}
                                </script>
                                <script type="text/html" id="type">

                                    {{# if (d.type == 'system') { }}
                                    <span class="layui-badge">{{d.type}}</span>
                                    {{# } else if(d.type == 'system_plugin') { }}
                                    <span class="layui-badge  layui-bg-cyan">{{d.type}}</span>
                                    {{# } else if(d.type == 'app') { }}
                                    <span class="layui-badge  layui-bg-blue">{{d.type}}</span>
                                    {{# } else { }}
                                    <span class="layui-badge  layui-bg-green">{{d.type}}</span>
                                    {{# } }}
                                </script>

                                <!--是否推荐-->
                                <script type="text/html" id="is_show">
                                    <input type="checkbox" name="ismenu" value="{{d.id}}" lay-skin="switch" lay-text="菜单|节点" lay-filter="state" {{ d.ismenu== 1 ? 'checked' : '' }}>
                                </script>
                                <!--是否推荐-->
                                <script type="text/html" id="status">
                                    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status" {{ d.status== 1 ? 'checked' : '' }}>
                                </script>
                                <!--添加时间-->
                                <script type="text/html" id="add_time">
                                    {{ formatDate(d.add_time) }}
                                </script>
                                <!--状态开关-->
                                <script type="text/html" id="listBar">
                                    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add_child" title="添加下级">添加下级</a>
                                    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
                                    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                        </div>
                        <div class="layui-card" style="background-color: #F2F2F2;">
                            <div>
                                <div class="layui-btn-group">
                                    <button class="layui-btn" id="btn-expand2">全部展开</button>
                                    <button class="layui-btn" id="btn-fold2">全部折叠</button>
                                </div>
                                <table class="layui-table" id="list2" lay-filter="listFilter2"></table>
                                <!--工具栏-->
                                <script type="text/html" id="listToolbar2">
                                    <!--<a class="layui-btn layui-btn-sm layui-bg-black" lay-event="refresh" title="刷新"><i class="layui-icon layui-icon-refresh" style="font-size: 8px !important;"></i> </a>-->
                                    <a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add" title="添加">添加权限节点</a>
                                    <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del" title="删除">删除权限节点</a>
                                </script>

                                <!--父id-->
                                <script type="text/html" id="pid2">
                                    {{ d.pid }}
                                </script>
                                <!--分类名称-->
                                <script type="text/html" id="cate_name2">
                                    {{ d.cate_name }}
                                </script>
                                <!--排序-->
                                <script type="text/html" id="sort2">
                                    {{ d.sort }}
                                </script>
                                <!--图标-->
                                <script type="text/html" id="pic2">
                                    {{#  if(d.icon != null&&d.icon != ''){ }}
                                    <i class="{{d.icon}}"></i>
                                    {{#  } else { }}
                                    <span style="color: #c2c2c2"> 无</span>
                                    {{#  } }}
                                </script>
                                <!--是否推荐-->
                                <script type="text/html" id="is_show2">
                                    <input type="checkbox" name="ismenu" value="{{d.id}}" lay-skin="switch" lay-text="菜单|节点" lay-filter="state2" {{ d.ismenu== 1 ? 'checked' : '' }}>
                                </script>
                                <!--是否推荐-->
                                <script type="text/html" id="status2">
                                    <input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="status2" {{ d.status== 1 ? 'checked' : '' }}>
                                </script>
                                <!--添加时间-->
                                <script type="text/html" id="add_time2">
                                    {{ formatDate(d.add_time) }}
                                </script>

                                <!--状态开关-->
                                <script type="text/html" id="listBar2">
                                    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add_child" title="添加下级">添加下级</a>
                                    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit">编辑</a>
                                    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
                                </script>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

{/block}

{block name="js"}
<script>
    var element, form, table, manage, treetable;
    layui.use(['element', 'form', 'table', 'manage', 'treetable'], function () {
        element = layui.element;
        form = layui.form;
        table = layui.table;
        manage = layui.manage;
        treetable = layui.treetable;

        element.on('tab(node_tab)', function (elem) {

            switch (this.getAttribute('lay-id')) {
                case '1':
                    $('.admin_tips').show();
                    $('.member_tips').hide();
                    break;
                case '2':
                    $('.admin_tips').hide();
                    $('.member_tips').show();
                    break;
            }
        });


        var isClick = true;
        form.on('switch(state)', function (obj) {
            tipText = "操作成功";
            if (isClick) {
                isClick = false;
                bwajax.post("{:Url('setShow')}", {id: this.value})
                    .then(function (response) {
                        if (response.data.data.errcode === 0) {
                            layer.msg(tipText, {icon: 1});
                        } else {
                            layer.msg(response.data.msg, {icon: 2});
                        }
                        isClick = true;
                    });
            } else {
                layer.msg('请不要操作太频繁！', {
                    icon: 5,
                    time: 1000
                });
            }
        });

        form.on('switch(status)', function (obj) {
            tipText = "操作成功";
            if (isClick) {
                isClick = false;
                bwajax.post("{:Url('setStatus')}", {id: this.value})
                    .then(function (response) {
                        if (response.data.data.errcode === 0) {
                            layer.msg(tipText, {icon: 1});
                        } else {
                            layer.msg(response.data.msg, {icon: 2});
                        }
                        isClick = true;
                    });
            } else {
                layer.msg('请不要操作太频繁！', {
                    icon: 5,
                    time: 1000
                });
            }
        });

        // 渲染表格
        layer.load(2);
        treetable.render({
            treeColIndex: 1,
            treeSpid: -1,
            toolbar: '#listToolbar',
            treeIdName: 'id',
            treeSpid: 0,//最上级的父级id
            treePidName: 'pid',
            treeDefaultClose: true,//是否默认折叠
            elem: '#list',
            url: "{:Url('node/index')}"+"?return_type=old_json",//,
            page: false,
            cols: [[
                {type: 'checkbox'},
                {field: 'title', minWidth: 200, title: '权限名称'},
                //{field: 'pic', title: '图标',width: 60, templet: '#pic'},
                {field: 'id', title: 'ID', width: 70},
                {field: 'scopes', title: '类别', width: 120, templet: '#type'},
                {field: 'menu_path', minWidth: 200, title: '路由URL'},
                {field: 'name', minWidth: 300, title: '真实URL'},
                {field: 'param', width: 60, title: '参数'},
                {field: 'is_show', width: 100, title: '是否菜单', templet: '#is_show'},
                {field: 'status', width: 100, title: '是否启用', templet: '#status'},
                //{field: 'remark', width: 80,  title: '备注'},
                {field: 'sort', align: 'center', width: 80, title: '排序'},
                {title: '操作', toolbar: '#listBar', align: 'center', width: 230}
            ]],
            done: function () {
                layer.closeAll('loading');
            }
        });

        $('#btn-expand').click(function () {
            treetable.expandAll('#list');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#list');
        });

        //监听工具条
        table.on('tool(list)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.msg('删除' + data.id);
            } else if (layEvent === 'edit') {
                layer.msg('修改' + data.id);
            }
        });

        //监听表格头部工具栏事件
        table.on('toolbar(listFilter)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'refresh':
                    reload(treetable);
                    break;
                case 'add':
                    layer.open({
                        title: '新增',
                        type: 2,
                        maxmin: true,
                        shade: 0.2,//关闭遮罩层
                        moveOut: true, //是否允许拖出可视窗口外
                        area: ['50%', '90%'],
                        content: "{:Url('add')}",
                    });
                    break;
                case 'del':
                    var checkStatus = table.checkStatus('list');
                    var data = checkStatus.data;

                    var idsArr = [];
                    data.forEach(function (value) {
                        idsArr.push(value.id);
                    });
                    ids = idsArr.join(',');

                    if (!ids) layer.msg('没有选中行', {icon: 2});
                    else del(ids);

                    break;
            }
        });

        //监听工具条
        table.on('tool(listFilter)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            switch (layEvent) {
                case 'edit':
                    layer.open({
                        title: '编辑',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        moveOut: true, //是否允许拖出可视窗口外
                        area: ['50%', '90%'],
                        content: "{:Url('edit')}?id=" + data.id,
                    });
                    break;
                case 'del':
                    del(obj.data.id);
                    break;
                case 'add_child':
                    layer.open({
                        title: '新增下级',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        moveOut: true, //是否允许拖出可视窗口外
                        area: ['50%', '90%'],
                        content: "{:Url('add')}?pid=" + data.id,
                    });
                    break;


            }
        });

        form.on('submit(searchBtn)', function (data) {
            reload(treetable);

            return false;
        })
        /**--------------------------------------------租户节点数据--------------------------------------------------**/
        form.on('switch(state2)', function (obj) {
            tipText = "操作成功";
            var emelment = $('.layui-form-switch');

            if (isClick) {
                isClick = false;

                bwajax.post("{:Url('setShow')}", {id: this.value})
                    .then(function (response) {
                        if (response.data.data.errcode === 0) {
                            layer.msg(tipText, {icon: 1});
                        } else {
                            layer.msg(response.data.msg, {icon: 2});
                        }
                        isClick = true;
                    });
            } else {
                layer.msg('请不要操作太频繁！', {
                    icon: 5,
                    time: 1000
                });
            }
        });

        form.on('switch(status2)', function (obj) {
            tipText = "操作成功";
            if (isClick) {
                isClick = false;
                bwajax.post("{:Url('setStatus')}", {id: this.value})
                    .then(function (response) {
                        if (response.data.data.errcode === 0) {
                            layer.msg(tipText, {icon: 1});
                        } else {
                            layer.msg(response.data.msg, {icon: 2});
                        }
                        isClick = true;
                    });
            } else {
                layer.msg('请不要操作太频繁！', {
                    icon: 5,
                    time: 1000
                });
            }
        });

        // 渲染表格
        layer.load(2);
        treetable.render({
            treeColIndex: 1,
            treeSpid: -1,
            toolbar: '#listToolbar2',
            treeIdName: 'id',
            treeSpid: 0,//最上级的父级id
            treePidName: 'pid',
            treeDefaultClose: true,//是否默认折叠
            elem: '#list2',
            url: "/manage/node/memberIndex?return_type=old_json",//"/layui/api/menus.json",
            page: false,
            cols: [[
                {type: 'checkbox'},
                {field: 'title', minWidth: 200, title: '权限名称'},
                //{field: 'pic', title: '图标',width: 60, templet: '#pic2'},
                {field: 'id', title: 'ID', width: 70},
                {field: 'scopes', title: '类别', width: 120, templet: '#type'},
                {field: 'menu_path', minWidth: 250, title: '路由URL'},
                {field: 'name', minWidth: 300, title: '真实URL'},
                {field: 'param', width: 60, title: '参数'},
                {field: 'is_show', width: 100, title: '是否菜单', templet: '#is_show2'},
                {field: 'status', width: 100, title: '是否启用', templet: '#status2'},
                //{field: 'remark', width: 80,  title: '备注'},
                {field: 'sort', align: 'center', width: 80, title: '排序'},
                {title: '操作', toolbar: '#listBar2', align: 'center', width: 230}
            ]],
            done: function () {
                layer.closeAll('loading');
            }
        });

        $('#btn-expand2').click(function () {
            treetable.expandAll('#list2');
        });

        $('#btn-fold2').click(function () {
            treetable.foldAll('#list2');
        });

        //监听工具条
        table.on('tool(list2)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                layer.msg('删除' + data.id);
            } else if (layEvent === 'edit') {
                layer.msg('修改' + data.id);
            }
        });


        //监听表格头部工具栏事件
        table.on('toolbar(listFilter2)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'refresh':
                    reload(treetable);
                    break;
                case 'add':
                    layer.open({
                        title: '新增',
                        type: 2,
                        maxmin: true,
                        shade: 0.2,//关闭遮罩层
                        moveOut: true, //是否允许拖出可视窗口外
                        area: ['50%', '90%'],
                        content: "/manage/node/addMember",
                    });
                    break;
                case 'del':
                    var checkStatus = table.checkStatus('list2');
                    var data = checkStatus.data;

                    var idsArr = [];
                    data.forEach(function (value) {
                        idsArr.push(value.id);
                    });
                    ids = idsArr.join(',');

                    if (!ids) layer.msg('没有选中行', {icon: 2});
                    else del(ids);

                    break;
            }
        });

        //监听工具条
        table.on('tool(listFilter2)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            switch (layEvent) {
                case 'edit':
                    layer.open({
                        title: '编辑',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        moveOut: true, //是否允许拖出可视窗口外
                        area: ['50%', '90%'],
                        content: "/manage/node/editMember?id=" + data.id,
                    });
                    break;
                case 'del':
                    del(obj.data.id);
                    break;
                case 'add_child':
                    layer.open({
                        title: '新增下级',
                        type: 2,
                        shade: 0.2,
                        maxmin: true,
                        moveOut: true, //是否允许拖出可视窗口外
                        area: ['50%', '90%'],
                        content: "/manage/node/addMember?pid=" + data.id,
                    });
                    break;
            }
        });
        form.on('submit(searchBtn2)', function (data) {
            reload(treetable);

            return false;
        })
    });

    /**
     * 返回一组图片标签
     */
    function getImgs(json_data, type) {
        console.log(json_data);
        var rs = '';
        //单图
        if (type == 1) {
            //得到图片
            rs = '<img src="' + json_data + '" style="border-radius:50%" class="layui-upload-img" width="25" height="25" onclick="openimgs(this)">';
        }
        //多图
        if (type == 2) {
            for (img in json_data) {
                rs += '<img src="' + json_data[img] + '" style="border-radius:50%" class="layui-upload-img" width="25" height="25" onclick="openimgs(this)">&nbsp&nbsp';
            }

        }
        //单文件
        if (type == 3) {

            rs += '<span class="layui-badge layui-bg-green">文件名：' + json_data.name + '</span>';
            rs += '<span class="layui-badge layui-bg-blue">大小：' + (json_data.size / 1024) + 'kb</span>';
        }

        return rs;
    }

    //表格重载
    function reload() {
        setTimeout(function () {
            treetable.render({
                treeColIndex: 1,
                treeSpid: -1,
                toolbar: '#listToolbar2',
                treeIdName: 'id',
                treeSpid: 0,//最上级的父级id
                treePidName: 'pid',
                treeDefaultClose: true,//是否默认折叠
                elem: '#list2',
                url: "/manage/node/memberIndex?return_type=old_json",//"/layui/api/menus.json",
                page: false,
                cols: [[
                    {type: 'checkbox'},
                    {field: 'title', minWidth: 200, title: '权限名称'},
                    {field: 'pic', title: '图标', width: 60, templet: '#pic2'},
                    {field: 'type_name', title: 'ID', width: 120, templet: '#type'},
                    {field: 'id', title: 'ID', width: 60},
                    {field: 'menu_path', minWidth: 250, title: '路由URL'},
                    {field: 'name', minWidth: 300, title: '真实URL'},
                    {field: 'param', width: 60, title: '参数'},
                    {field: 'is_show', width: 150, title: '是否菜单', templet: '#is_show2'},
                    {field: 'status', width: 100, title: '是否启用', templet: '#status2'},
                    {field: 'remark', width: 80, title: '备注'},
                    {field: 'sort', align: 'center', width: 80, title: '排序号'},
                    {title: '操作', toolbar: '#listBar2', align: 'center', width: 230}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });


            treetable.render({
                treeColIndex: 1,
                treeSpid: -1,
                toolbar: '#listToolbar',
                treeIdName: 'id',
                treeSpid: 0,//最上级的父级id
                treePidName: 'pid',
                treeDefaultClose: true,//是否默认折叠
                elem: '#list',
                url: "{:Url('index')}",//"/layui/api/menus.json",
                page: false,
                cols: [[
                    {type: 'checkbox'},
                    {field: 'title', minWidth: 200, title: '权限名称'},
                    {field: 'pic', title: '图标', width: 60, templet: '#pic'},
                    {field: 'type_name', title: 'ID', width: 120, templet: '#type'},
                    {field: 'id', title: 'ID', width: 60},
                    {field: 'menu_path', minWidth: 250, title: '路由URL'},
                    {field: 'name', minWidth: 300, title: '真实URL'},
                    {field: 'param', width: 60, title: '参数'},
                    {field: 'is_show', width: 150, title: '是否菜单', templet: '#is_show'},
                    {field: 'status', width: 100, title: '是否启用', templet: '#status'},
                    {field: 'remark', width: 80, title: '备注'},
                    {field: 'sort', align: 'center', width: 80, title: '排序号'},
                    {title: '操作', toolbar: '#listBar', align: 'center', width: 230}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });


        }, 500);

    }


    //删除
    function del(ids) {
        layer.confirm('确认删除?', function (index) {
            //ajax调用后台接口
            bwajax.post("{:Url('delete')}?ids=" + ids)
                .then(function (response) {
                    if (response.data.data.errcode === 0) {
                        layer.msg('删除成功', {icon: 1});
                        reload(treetable);
                    } else {
                        layer.msg(response.data.msg, {icon: 2});
                    }
                });
            layer.close(index);
        });
    }

</script>
{/block}